<template>
  <div class="giftCard">
    <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/gift/title.png" class="title">
    <div class="gift">
      <div class="gift-item">
        <div class="item">卡号<span>{{gift_card_info.card_number}}</span></div>
        <img :src="gift_info.item_img" mode="scaleToFill">
        <div class="item-title">{{gift_info.title}}</div>
      </div>
      <div class="click-btn" :class=" status ? '' : 'noActive' " @click="clickPassword">{{status_name}}</div>
    </div>
    <van-popup v-model="showPassword" class="passPop">
      <div class="pop-content">
        <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/gift/passwordCard.png" class="passwordCard">
        <div class="set-pass">
          <div class="item">卡号<span>{{gift_card_info.card_number}}</span></div>
          <div class="password-jy"><input v-model="password" maxlength="6" @confirm="checkPassword" placeholder="请输入卡密"></div>
          <div class="click-btn" :class=" password.length == 6 ? '' : 'noActive' " @click="checkPassword">验证密码</div>
        </div>
        <div class="close" @click="closePop"><img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/close_icon_btn.png"></div>
      </div>
    </van-popup>
    <sku-dialog :visible.sync="skuDialogVisible" :itemId="item_id" :gift="true" :gift_cards_str="gift_cards_str"></sku-dialog>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>
<script>
import { getGiftCardsDetail, checkGiftCardPassword } from '@/api/user/gift'
import skuDialog from '@/views/item/components/skuDialog'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import small from '@/smallapp/small.js'

import Vue from 'vue'
import { Popup } from 'vant'
Vue.use(Popup)
export default {
  components: {
    skuDialog,
    SmallLogin
  },
  data() {
    return {
      gift_cards_id: '',
      card_id: '',
      item_id: '',
      gift_card_info: {},
      gift_info: {},
      status: 0,
      status_name: '',
      showPassword: false,
      password: '',
      gift_cards_str: '',
      skuDialogVisible: false
    }
  },
  mounted() {
    window.addEventListener('wxload', (query) => {
      console.log(query, '监听页面参数')
      if (query.is_scan == 1) { // 当是小程序码扫码进入的时候
        this.card_id = query.card_id
        // this.item_id = this.$route.query.item_id
        this.gift_cards_id = query.gift_cards_id
        this.init()
      } else if (query.scene) {
        // this.init()
      } else {
        this.gift_cards_id = this.$route.query.gift_cards_id
        this.card_id = this.$route.query.card_id
        // this.item_id = this.$route.query.item_id
        this.init()
      }
    })
    if (!small.checkLogin()) {
      this.$refs.smalllogin.openSmallLoginPop()
    }
    window.$$subscribe('loginReload', reload => {
      if (reload) {
        this.init()
      }
    })
  },
  created() {
    this.gift_cards_id = this.$route.query.gift_cards_id
    this.card_id = this.$route.query.card_id
    // this.item_id = this.$route.query.item_id
    // this.init()
  },
  methods: {
    showSku() {
      this.skuDialogVisible = true
    },
    closePop() {
      this.showPassword = false
      this.password = ''
    },
    init() {
      this.$loadingWrap.show()
      getGiftCardsDetail({
        gift_cards_id: this.gift_cards_id,
        card_id: this.card_id
      }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.gift_info = res.data.gift_info
          this.gift_card_info = res.data.gift_card_info
          this.status_name = res.data.status_name
          this.status = res.data.status
          this.item_id = this.gift_info.item_id
        } else {
          this.$Error(res.msg)
        }
      })
    },
    clickPassword() {
      if (this.status) {
        // if (this.gift_cards_str == '') {
          if (!small.checkLogin()) {
            this.$refs.smalllogin.openSmallLoginPop()
            return
          }
          this.showPassword = true
        // } else {
        //   this.showSku()
        // }
      }
    },
    checkPassword() {
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
        return
      }
      if (this.password.length == 6) {
        this.$loadingWrap.show()
        checkGiftCardPassword({
          gift_cards_id: this.gift_cards_id,
          card_id: this.card_id,
          password: this.password
        }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.gift_cards_str = res.data.gift_cards_str
            this.closePop()
            this.showSku()
          } else {
            this.$Error(res.msg)
          }
        })
      } else {
        this.$Error('请输入正确的卡密')
      }
    }
  }
}
</script>
<style lang="scss">
@import "~@/styles/mixin";
.giftCard {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  background: url('https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/gift/bgCard.png') no-repeat top left;
  background-size: 100% 100%;
  .title {
    width: 552px;
    height: 220px;
    display: block;
    margin: 80px auto 0;
  }
  .gift {
    width: 100%;
    position: relative;
    height: 770px;
    top: -34px;
    background: url('https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/gift/gift.png') no-repeat top left;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    .gift-item {
      width: 290px;
      // height: 266px;
      text-align: center;
      position: relative;
      // top: -14px;
      .item-title {
        // font-size: 24px;
        @include lineClamp(24px, 1.4, 1);
      }

      img {
        width: 156px;
        height: 156px;
        margin: 16px 0;
        border-radius: 12px;
      }
    }
    .click-btn {
      min-width: 288px;
      line-height: 72px;
      background: linear-gradient(95.13deg, #FF6439 -3.44%, #FF3134 100.01%);
      border-radius: 88px;
      text-align: center;
      color: #fff;
      margin-top: 64px;
      font-size: 32px;
      &.noActive {
        background: #C9CDD4;
        color: #fff;
      }
    }
  }
  .passPop {
    width: 508px;
    background: transparent;
    overflow: inherit;
    // height: 372px;
    .pop-content {
      position: relative;
      top: -56px;
      .passwordCard{
        width: 100%;
        height: 214px;
        display: block;
        padding: 0 32px;
        position: absolute;
        top: -142px;
        z-index: 10;
      }
      .set-pass {
        background: linear-gradient(180deg, #FFFCF6 0%, #FAE4E1 100%);
        border-radius: 24px;
        // height: 372px;
        padding:  80px 40px 40px;
        text-align: center;
        .password-jy {
          margin-top: 16px;
          margin-bottom: 40px;
          input {
            line-height: 72px;
            border: 1px solid #FFDBCC;
            border-radius: 8px;
            background: #fff;
            text-align: center;
            font-size: 32px;
            width: 100%;
            &::placeholder {
              font-size: 24px;
              color: #C9CDD4;
            }
            
          }
        }
        .click-btn {
          width: 288px;
          line-height: 72px;
          background: linear-gradient(95.13deg, #FF6439 -3.44%, #FF3134 100.01%);
          border-radius: 88px;
          text-align: center;
          color: #fff;
          margin: auto;
          font-size: 32px;
          &.noActive {
            background: #C9CDD4;
            color: #fff;
          }
        }
      }
      .close {
        text-align: center;
        margin-top: 56px;
        img {
          width: 60px;
          height: 60px;
          // padding: 12px;
        }
      }
    }    
  }
}
.item {
  font-size: 32px;
  font-weight: 500;
  span {
    margin-left: 16px;
  }
}
</style>